<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分离式导航栏</title>
    <style>
      body {
        font: 1.2em / 1.5 sans-serif;
        padding: 0;
        margin: 1em;
      }

      .main-nav {
        display: flex;
      }
      .main-nav li {
        list-style: none;
        padding: 0 10px;
      }
      .push {
        margin-left: auto;
      }

      /* hr 水平分割线 */
      .list-group {
        list-style: none;
        margin: 0;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 0.5em;
        width: 20em;
      }

      .list-group li {
        /* 下的全li标签 */
        border-top: 1px solid #ccc;
        padding: 0.5em;
        /* 浮动 */
        display: flex;
        /* 水平空白内容环绕 */
        justify-content: space-between;
        /* 垂直居中 */
        align-items: center;
      }

      .list-group li:first-child {
        border-top: 0;
      }

      .list-group .badge {
        background-color: rebeccapurple;
        color: #fff;
        font-weight: bold;
        font-size: 80%;
        border-radius: 10em;
        min-width: 1.5em;
        padding: 0.25em;
        text-align: center;
      }

      /* #3.分页 */
      .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: auto;
        margin: 0;
        /* 当元素内容溢出时的处理方案：hidden 隐藏 */
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap;
      }
      .page-nav {
        /* 只做上边框 弄一条线 */
        border-top: 1px solid #eee;
        margin-top: 1em;
        padding-top: 0.5em;
        font: 1.2em sans-serif;

        display: flex;
        justify-content: center;
      }

      .pagination {
        /* 去除列表样式 */
        list-style: none;
        /* 清除内外边距 */
        margin: 0;
        padding: 0;
        /* 弹性布局 */
        display: flex;
      }
      .pagination li {
        margin: 0 2px;
        width: 1.5em;
      }
      .pagination a {
        display: block;
        /* a标签的上下边距会影响盒子的可见框大小 */
        padding: 0.1em 0.3em;
        border: 1px solid #999;
        border-radius: 0.2em;
        text-decoration: none;
        /* justify-content: center; */
      }

      .pagination a:hover {
        background-color: #bfa;
      }

      /* class pagination 下的a标签内 aria-current="page" 属性匹配*/
      .pagination a[aria-current="page"] {
        background-color: #999;
        color: #fff;
      }

      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        grid-gap: 20px;
      }

      .card {
        /* background-color: #ccc; */
        border: 1px solid #ccc;
        display: grid;
        grid-template-rows: max-content 200px 1fr;
      }
      .card img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

      /* 网格布局grid */
      body {
        font: 1.2em sans-serif;
      }
      .grid {
        display: grid;
        /* 
            设置网格中的列：
            minmax(20px,1fr)最小20px,最大1fr
            repeat(6,minmax(0,60px))重复六次，最小0，最大60px
            minmax(20px,1fr)最小20px,最大1fr
         */
        grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(
            20px,
            1fr
          );
        grid-auto-rows: minmax(100px, auto);
        grid-gap: 10px;
      }

      .grid > * {
        border: 2px solid rgb(95 97 110);
        border-radius: 0.5em;
        padding: 20px;
      }

       .wrapper {
        grid-column: 2 / -2;
      }

      .full-width {
        /* 网格定位线简写  
        斜线字符（/）前面的值为起始网格线，斜线字符（/）后面的值为终止网格线。 
        如果网格项只跨越了一个轨道，可以省略终止值 允许负值*/
        grid-column: 1 / -1;
      }


      .left-edge {
        grid-column: 1 / -2;
      }

      .right-wrapper {
        grid-column: 4 / -2;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul class="main-nav">
        <li><a href="">About</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Our Team</a></li>
        <li class="push"><a href="">Contact</a></li>
      </ul>
    </nav>

    <span style="display: flex; justify-content: center">我是分割线</span>
    <hr />
    <span style="display: flex; justify-content: center">我是分割线</span>

    <ul class="list-group">
      <li>one<span class="badge">1</span></li>
      <li>two<span class="badge">2</span></li>
      <li>three<span class="badge">3</span></li>
      <li>four<span class="badge">4</span></li>
    </ul>
    <span style="display: flex; justify-content: center">我是分割线</span>
    <hr />
    <span style="display: flex; justify-content: center">我是分割线</span>

    <nav aria-label="pagination" class="page-nav">
      <ul class="pagination">
        <li>
          <a href="">
            <span aria-hidden="true">&laquo;</span>
            <span class="visuallyhidden">previous set of pages</span>
          </a>
        </li>
        <li>
          <a href=""><span class="visuallyhidden">page </span>1</a>
        </li>
        <li>
          <a href="" aria-current="page">
            <span class="visuallyhidden">page </span>2
          </a>
        </li>
        <li>
          <a href=""> <span class="visuallyhidden">page </span>3 </a>
        </li>
        <li>
          <a href=""> <span class="visuallyhidden">page </span>4 </a>
        </li>
        <li>
          <a href="">
            <span class="visuallyhidden">next set of pages</span
            ><span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

    <hr />
    <div class="cards">
      <article class="card">
        <header>
          <h2>A short heading</h2>
        </header>
        <img src="img/golang-motor.png" alt="Hot air balloons" />
        <div class="content">
          <p>
            The idea of reaching the North Pole by means of balloons appears to
            have been entertained many years ago.
          </p>
        </div>
      </article>

      <article class="card">
        <header>
          <h2>A short heading</h2>
        </header>
        <img src="img/golang-motor.png" alt="Hot air balloons" />
        <div class="content">
          <p>Short content.</p>
        </div>
        <footer>I have a footer!</footer>
      </article>

      <article class="card">
        <header>
          <h2>A longer heading in this card</h2>
        </header>
        <img src="img/golang-motor.png" alt="Hot air balloons" />
        <div class="content">
          <p>
            In a curious work, published in Paris in 1863 by Delaville Dedreux,
            there is a suggestion for reaching the North Pole by an aerostat.
          </p>
        </div>
        <footer>I have a footer!</footer>
      </article>
      <article class="card">
        <header>
          <h2>A short heading</h2>
        </header>
        <img src="img/golang-motor.png" alt="Hot air balloons" />
        <div class="content">
          <p>
            The idea of reaching the North Pole by means of balloons appears to
            have been entertained many years ago.
          </p>
        </div>
      </article>
    </div>

    <hr />
    <div class="grid">
      <div class="wrapper">
        <p>
          This item aligns to a central “wrapper” – columns that have a maximum
          width.
        </p>
      </div>
      <div class="full-width">
        <p>This item aligns to the edge of the grid container.</p>
      </div>
      <div class="left-edge">
        <p>
          This item aligns to the left edge of the grid container and the right
          edge of the wrapper.
        </p>
      </div>
      <div class="right-wrapper">
        <p>This item aligns to the right edge of the “wrapper” columns.</p>
      </div>
    </div>
  </body>
</html>
